
<!DOCTYPE html>
<html>
  <head>
    <title>websocket.html</title>	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html" charset="UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->	
  </head>  
  <body>
	<div>  
	    <p id="response"></p>
	</div>
	
	<!-- 独立JS -->
	<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js" charset="utf-8"></script>
  </body>
</html>
	<script type="text/javascript">

	    var stompClient = null;	
	    //加载完浏览器后  调用connect（），打开双通道
	    $(function(){	
		//打开双通道
		connect()
	    })
	    //强制关闭浏览器  调用websocket.close（）,进行正常关闭
	    window.onunload = function() {
	    	disconnect()
	    }
	    function connect(){
	    	//连接SockJS的endpoint名称为"endpointOyzc"
	        var socket = new SockJS('http://127.0.0.1:8080/endMessage'); 
	        stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
	        stompClient.connect({},function(frame){//连接WebSocket服务端     
	            console.log('Connected:' + frame);
	            //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
	            stompClient.subscribe('/topic/getResponse',function(response){
	                showResponse(JSON.parse(response.body));
	            });
	        });
	    }
	 
	    //关闭双通道
	    function disconnect(){
	        if(stompClient != null) {
	            stompClient.disconnect();
	        }
	        console.log("Disconnected");
	    }
	    
	    function showResponse(message){
	        var response = $("#response");
	        response.append("<p>"+message.userName+"</p>");
	    }

	</script>